<template>
    <div style="border: 1px solid #ccc">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        @onCreated="handleCreated"
        @onDestroyed="handleDestroyed"
      />
    </div>
    <a-button type="primary" size="small"  @click="saveHtmlText">保存</a-button>
  </template>
  <script setup lang="ts">
  import "@wangeditor/editor/dist/css/style.css"; // 引入 css
  import { ref, shallowRef, watch } from "vue";
  import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import service from "@/axios";

  const props = defineProps({
    record:{} as any
  })

  const emit = defineEmits(['saveContent'])


  // 编辑器实例，必须用 shallowRef，重要！
  const editorRef = shallowRef();
  const toolbarConfig = ref({});
  const valueHtml = ref(props.record.content);
  const editorConfig = ref({ placeholder: "请输入内容..." });
  const handleCreated = (editor: any) => {
    /** 编辑起初始化 */
    debugger
    editorRef.value = editor;
  };
  const handleDestroyed = (editor: any) => {
    /**编辑器销毁 */
  };
  const saveHtmlText = () => {
    debugger
    let editRecordInfo = Object.assign({},props.record)
    editRecordInfo.content = valueHtml.value;
    service.post('/record/addRecord',editRecordInfo).then(res=>{
        emit('saveContent',editRecordInfo)
    })
  };
  </script>